<template>
  <div class="sys-dict-data">

    <AppMainHeader>
      <el-row>
        <el-col :span="22">
          <SysDictDataQueryForm @query="handleQuery" />
        </el-col>
        <el-col :span="2" class="text-right">
          <el-button type="primary" @click="handleAdd" v-hasPermi="['sys:dictData:add']">新增</el-button>
        </el-col>
      </el-row>
    </AppMainHeader>

    <AppMainContent>
      <SysDictDataTable
        v-loading="loading"
        :data="dataList"
        @row-update="handleUpdate"
        @row-delete="handleDelete"
      />

      <Pagination
        v-show="total > 0"
        :total="total"
        :current.sync="queryParams.pageNum"
        :size.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </AppMainContent>

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="85px">
        <el-form-item label="字典类型">
          <el-input v-model="form.dictType" :disabled="true" />
        </el-form-item>
        <el-form-item label="字典标签" prop="dictLabel">
          <el-input v-model="form.dictLabel" placeholder="请输入数据标签" />
        </el-form-item>
        <el-form-item label="字典键值" prop="dictValue">
          <el-input
            v-model="form.dictValue"
            @keydown.native="channelInputLimit"
            placeholder=""
            type="number"
          />
        </el-form-item>
        <el-form-item label="显示排序" prop="dictSort">
          <el-input-number
            v-model="form.dictSort"
            @keydown.native="channelInputLimit"
            controls-position="right"
            :min="0"
          />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="form.remark"
            type="textarea"
            placeholder="请输入备注"
            resize="none"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  // * API 接口
  import { addDictData, deleteDictData, fetchDictData, pageDictData, updateDictData } from '@/api/system/dict/data'

  // * 组件
  import SysDictDataQueryForm from '@/views/system/components/sys-dict-data-query-form'
  import SysDictDataTable from '@/views/system/components/sys-dict-data-table'

  let pageParams = { pageNum: 1, pageSize: 10 }

  export default {
    name: 'SystemDictData',
    components: { SysDictDataQueryForm, SysDictDataTable },
    props: {
      dictType: String
    },
    data() {
      return {
        // 遮罩层
        loading: false,
        // 总条数
        total: 0,
        // 字典表格数据
        dataList: [],
        // 默认字典类型
        defaultDictType: '',
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: { ...pageParams, dictType: this.dictType },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          dictLabel: [
            { required: true, message: '数据标签不能为空', trigger: 'blur' },
            { max: 25, message: '长度不超过25个字符', trigger: 'blur' },
          ],
          dictValue: [
            { required: true, message: '数据键值不能为空', trigger: 'blur' },
            { max: 5, message: '长度不超过5个字符', trigger: 'blur' },
          ],
          dictSort: [
            { required: true, message: '数据顺序不能为空', trigger: 'blur' },
          ],
          remark: [{ max: 25, message: '长度不超过25个字符', trigger: 'blur' }],
        },
      }
    },
    created() {
      this.queryParams = {...this.queryParams, dictType: this.dictType }

      this.getList()
    },
    methods: {
      // * 查询字典数据列表
      getList() {
        this.loading = true
        pageDictData(this.queryParams).then((response) => {
          let { data = [], page = {} } = response
          let { pageNum = 1, pageSize = 10, total = 0 } = page

          data.forEach((item, index) => {
            item.rowNumber = (pageNum - 1) * pageSize + index + 1
          })

          this.dataList = data
          this.total = total
          this.loading = false
        })
      },
      channelInputLimit(e) {
        let key = e.key
        // 不允许输入'e'和'.'
        if (key === 'e' || key === '.') {
          e.returnValue = false
          return false
        }
        return true
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.form = {
          dictCode: undefined,
          dictLabel: undefined,
          dictValue: undefined,
          dictSort: 0,
          isDisabled: 0,
          remark: undefined,
        }
        this.resetForm('form')
      },
      /** 搜索按钮操作 */
      handleQuery(queryForm) {
        this.queryParams = {...queryForm, ...pageParams, dictType: this.dictType }
        this.getList()
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset()
        this.open = true
        this.title = '添加字典数据'
        this.form.dictType = this.queryParams.dictType
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset()

        fetchDictData(row.dictCode).then((response) => {
          this.form = response.data
          this.open = true
          this.title = '修改字典数据'
        })
      },
      /** 提交按钮 */
      submitForm: function() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            if (this.form.dictCode) {
              updateDictData(this.form).then((response) => {
                this.msgSuccess('修改成功')
                this.open = false
                this.getList()
              })
            } else {
              addDictData(this.form).then((response) => {
                this.msgSuccess('新增成功')
                this.open = false
                this.getList()
              })
            }
          }
        })
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        this.$confirm(
          '是否确认删除字典标签为"' + row.dictLabel + '"的数据项?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(function() {
            return deleteDictData(row.dictCode)
          })
          .then(() => {
            this.getList()
            this.msgSuccess('删除成功')
          })
      },
    },
  }
</script>
<style>
  input[type='number'] {
    -moz-appearance: textfield;
  }
  input[type='number']::-webkit-inner-spin-button,
  input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
</style>
